<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<link rel="stylesheet" href="js/Bootstrap.css">
<link rel="stylesheet" href="js/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="js/jquery.mobile.icons.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile.js"></script>
<script src="js/tools.js"></script>
<script type="text/javascript" charset="utf-8">
	var myEvent;
	// Wait for device API libraries to load
	//
	$(document).ready(onLoad);
	function onLoad() {
		document.addEventListener("deviceready", onDeviceReady, false);
		
		var id = getURLQueryString("id");
		if(id != "")
		{
			//初始化設定：載入資料庫事件
			db.transaction(function(tx)
			{
				var insertSql = "SELECT * FROM EVENTS WHERE id = ?";
				tx.executeSql(insertSql,[id],function(tx,results) {
						myEvent = results.rows.item(0);
						var m_date = new Date(myEvent['date']);
						$("#txtDate").val(m_date);
						$("#txtTime").val(m_date.getHours() + ":" + m_date.getMinutes());
						$("#txtTitle").val(myEvent['logTitle']);
						$("#txtRecord").val(myEvent['log']);
					});
			});
			//顯示刪除按扭
			$("#btnDel").css("display","block");
		}
		
		//事件處理：儲存資料
		$("#btnSave").click(function(){
			// insert data
			db.transaction( function(tx)
			{
				var date = new Date();
				date.setTime(pickedTime.getTime());
				date.setFullYear(pickedDate.getFullYear(),pickedDate.getMonth(),pickedDate.getDate());
				
				var strDate = String.format("{0}-{1}-{2} {3}:{4}:{5}", date.getFullYear(),
				String.padLeft(date.getMonth()+1,2), String.padLeft(date.getDate(),2),
				String.padLeft(date.getHours(),2), String.padLeft(date.getMinutes(),2), 
				String.padLeft(date.getSeconds(),2));
				
				var insertSql = "INSERT INTO EVENTS (Date, logTitle, log) VALUES ('"
				 + strDate + "','" 
				 + $("#txtTitle").val() + "'"+ ",'" 
				 + $("#txtRecord").val() +"')";
				tx.executeSql(insertSql);
			});
			window.location.href = "index.html";
		});
		
		//事件處理：刪除資料
		$("#btnDel").click(function(){
			// delete data
			db.transaction( function(tx)
			{
				var insertSql = "DELETE FROM EVENTS WHERE id = ?" ;
				tx.executeSql(insertSql, [myEvent['id']]);
			});
			window.location.href = "index.html";
		});

	}
	// device APIs are available
	// deviceready事件處理函數，PhoneGap完成載入後調用該函數
	function onDeviceReady() {

	}
	var pickedDate;
	function pickDate()
	{
		var options = {
		date: new Date(),
		mode: 'date'
		};
		datePicker.show(options, function(m_date){
  			pickedDate = m_date;
			$(txtDate).val((m_date.getMonth()+1) + "/" + m_date.getDate());
		});
	}
	var pickedTime;
	function pickTime()
	{
		var options = {
		date: new Date(),
		mode: 'time'
		};
		datePicker.show(options, function(n_date){
			pickedTime = n_date;
			$(txtTime).val(n_date.getHours() + ":" + n_date.getMinutes());
  		});
	}
	function inputDate()
	{
		var time = prompt("Please enter the Time",new Date());
		var myTime = new Date(time);
		if (myTime != null) 
		{
			$("#txtDate").val(myTime.getFullYear() +
			  "/" + (myTime.getMonth()+1) + '/' + myTime.getDate());
		}
	}
	// create database
	var db = window.openDatabase('Calendar', '0.1', 'AceCalendar', 200000);
	//測試使用： create table
	//db.transaction(function (tx) {
  	//	tx.executeSql('CREATE TABLE IF NOT EXISTS EVENTS (id integer, date NUMERIC, logTitle, log, PRIMARY KEY (id))');
	//});
</script>
<style type="text/css">
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
	padding: 0px 5px;
	height: auto;
}
.eventWidget {
	width: 97%;
	border: 2px solid #9C9C9C;
	border-radius: 5px;
	margin: 0.5em 0em;
	padding: 0 0.3em;
}
hr {
	margin: 0px;
	border-style: none;
	border-top: 1px dotted black;
}
table {
	width: 100%;
	border: 2px solid #9C9C9C;
	border-radius: 5px;
}
</style>
<title>行事曆細項</title>
</head>
<body>
<div data-role="page">
  <div class="ui-header" style="background: rgba(245,245,245,0.5);padding:5px;" data-role="header" data-position="fixed">
  	<h1 id="lbListMonth" style="color:black;border:5px double black;border-radius:10px;">2014.07.10</h1>
  </div>
  <!-- /header -->
  <div role="main" class="ui-content">
    <div id="dayWidget">
      <form method="post" action="">
        <table>
          <tr>
            <td><label for="txtDate">日期</label></td>
            <td><input name="txtDate" id="txtDate" data-mini="true"  value="" onclick="pickDate()" type="text"></td>
          </tr>
          <tr>
            <td><label for="txtTime">時間</label></td>
            <td><input name="txtTime" id="txtTime" data-mini="true" value="" onClick="pickTime()" type="text"></td>
          </tr>
          <tr>
            <td><label for="txtTitle">標題</label></td>
            <td><input name="txtTitle" id="txtTitle" data-mini="true" value="" type="text"></td>
          </tr>
          <tr>
            <td><label for="txtRecord">記事</label></td>
            <td><textarea name="txtRecord" id="txtRecord" data-mini="true" value="" ></textarea></td>
          </tr>
        </table>
      </form>
    </div>
    <!-- /dayWidget -->
    <div class="ui-grid-b">
      <div class="ui-block-a">
        <button class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('和某人有聚餐');$('#txtRecord').val('姓名：\r地點：\r重點：');">聚餐</button>
      </div>
      <div class="ui-block-b">
        <button class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('打電話給某人');$('#txtRecord').val('姓名：\r電話：\r重點：');">電話</button>
      </div>
      <div class="ui-block-c">
        <button class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('有重要的會議');$('#txtRecord').val('主題：\r地點\r');">開會</button>
      </div>
      <div class="ui-block-a">
        <button class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('有重要的約會');$('#txtRecord').val('姓名：\r地點\r');">約會</button>
      </div>
      <div class="ui-block-b">
        <button class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('與客戶有約');$('#txtRecord').val('姓名：\r地點\r');">客戶</button>
      </div>
      <div class="ui-block-c">
        <button class="ui-btn ui-mini ui-btn-e ui-corner-all" onClick="$('#txtTitle').val('與廠商有約');$('#txtRecord').val('姓名：\r地點\r');">廠商</button>
      </div>
    </div>
    <!-- /grid-b -->
    <button id="btnSave" class="ui-btn ui-btn-a ui-corner-all">確認</button>
    <a href="index.html" id="btnCancel" data-ajax="false" class="ui-btn ui-btn-a ui-corner-all">取消</a>
    <button id="btnDel" style="display:none" class="ui-btn ui-btn-c ui-corner-all">刪除</button>
  </div>
  <!-- /content --> 
  
</div>
<!-- /page -->
</body>
</html>
